<template>
  <div class="dashboard-container">
    <div class="app-container">
<<<<<<< HEAD
      <el-button type="primary">+新建目录</el-button>
      <!-- 第一部分 -->
      <el-card class="chose">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="目录名称">
          <el-select v-model="formInline.subjectID" placeholder="请选择">
            <el-option
             v-for="item in options"
             :key="item.id"
             :label="item.directoryName"
             :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option
             v-for="item in statusOptions"
             :key="item.value"
             :label="item.label"
             :value="item.value"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  @click="getName()">清除</el-button>
          <el-button type="primary" >搜索</el-button>
        </el-form-item>
      </el-form>
      </el-card>
      <!-- 第二部分 -->
      <el-card class="two">
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100% ; margin:0;">
          <el-table-column label="序号">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.number}}</span>
            </template>
          </el-table-column>
          <el-table-column label="目录名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建者">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建日期">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="面试题数量">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-link>
              <el-link type="primary">禁用</el-link>
              <el-link size="mini" type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-sizes="[10]"
          :page-size="formInline.per_page"
          layout="total, prev, pager, next ,sizes, jumper"
          :total="400"
        ></el-pagination>
      </el-card>
    </div>
=======
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- +++++++++++++++++++++++++++++++++新建目录点击的弹窗已经定义好了，但是修改目录和搜索的没弄，同时弹窗的提交数据没有弄 -->
    <el-form ref="form" :model="contentsForm" class="contentForm">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item>
            <el-button plain size="small" @click="dialogFormVisible = true">新建目录</el-button>
            <el-button plain size="small">返回学科</el-button>
          </el-form-item>
          <!-- 点击新建目录后弹出的对话框 -->
          <el-dialog title="新建目录" :visible.sync="dialogFormVisible">
            <el-form :model="newContentform">
              <el-form-item label="目录名称" :label-width="formLabelWidth">
                <el-input v-model="newContentform.directoryName" autocomplete="off" placeholder="请输入" style="width: 600px"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false, addContent" >确 定</el-button>
            </div>
          </el-dialog>
        </el-col>
        <el-col :span="7">
          <el-form-item label="目录名称" style="font-size: 12px;font-weight: 400;">
            <!-- <span class="text_ts" style>
            目录名称</span>-->
            <el-input v-model="contentsForm.directoryName" placeholder="请输入" style="width: 250px;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="状态" style="font-size: 12px;font-weight: 400;">
            <!-- <span class="text_ts">
            状态</span>-->
            <template slot-scope="scope">
              <el-select
                v-model="contentsForm.status"
                placeholder="请选择"
                style="margin-right: 10px;"
              >
                <el-option
                  v-for="item in contentsOptions"
                  :value="item.value"
                  :key="item.id"
                  :label="item.label"
                ></el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label style="font-size: 12px;font-weight: 400;">
            <el-button plain size="small" @click="clearCont">清除</el-button>
            <el-button type="primary" size="small">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <!-- 想要根据状态指来更改启用或者禁用的数字，要使用插槽和进行判断 -->
      <el-form-item>
        <el-table :data="contents" border>
          <el-table-column prop="id" label="序号" width="100"></el-table-column>
          <el-table-column prop="directoryName" label="目录名称" width="180"></el-table-column>
          <el-table-column prop="creator" label="创建者"></el-table-column>
          <el-table-column prop="addDate" label="创建日期"></el-table-column>
          <el-table-column prop="totals" label="面试题数量"></el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">启用</span>
              <span v-else>禁用</span>
            </template>
            <!-- <span>222</span> -->
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-link type="primary">修改</el-link>
              <el-link type="primary" @click="changeState(scope.row)">
                <span v-if="scope.row.state==0">启用</span>
                <span v-else>禁用</span>
              </el-link>
              <el-link type="danger" @click="delcol(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper, total"
          :page-size="contentsForm.pagesize"
          :current-page="contentsForm.page"
          :page-sizes="[1, 2, 3, 4]"
          :total="counts"
          style="float: right"
          @current-change="pageChange"
          @size-change="pagesizeChange"
        ></el-pagination>
      </el-form-item>
    </el-form>
>>>>>>> 32e82707a14f0dad74099e4b550eacea3a0f58e8
  </div>
</template>

<script>
<<<<<<< HEAD
import {status} from '@/api/hmmm/constants'
import * as api from '@/api/hmmm/directorys'
=======
import * as ljc from '@/api/hmmm/directorys.js'
import { status } from '@/api/hmmm/constants.js'

>>>>>>> 32e82707a14f0dad74099e4b550eacea3a0f58e8
export default {
  name: 'DirectorysList',
  data() {
    return {
<<<<<<< HEAD
      formInline: {
          catalogue: null,
          status: null,
          subjectID: null,
          page: 1,
          per_page: 20
        },
        options: [],
        statusOptions: status,
      tableData: [
        {
          number: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  created() {
    this.getName()
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

      async getName() {
        const data = await api.list()
        this.options = data.data.items
        console.log(data.data.items)

      }
=======
      contentsForm: {
        directoryName: null,
        page: 1,
        pagesize: 1,
        subjectID: null,
        status: null
      },
      contents: [],
      // 是表格中的数据存储的数组
      contentsOptions: status,
      // region: [],
      counts: 0,
      dialogFormVisible: false,
      newContentform: {
          directoryName: null,
          subjectID: null
        },
        formLabelWidth: '120px'
      // region: {
      //   value: null,
      //   label: null
      // }
    }
  },
  created() {
    this.getContents()
    // this.getContentslist()
  },
  methods: {
    // 定义异步函数，直接获取定义好的函数来获取接口信息，
    // 要先使用import引入接口函数(要定义一个变量接收这个接口函数，变量名可以随便定义)，
    // 然后直接使用这个变量名进行发送请求即可
    // 发送请求后，打印出来接收到的对象，然后根据打印出来的对象将想要获取到的数据根据嵌套关系赋值给定义好的表格数组
    async getContents() {
      const items = await ljc.list(this.contentsForm)
      console.log(items)
      this.contents = items.data.items
      this.counts = items.data.counts
    },
    clearCont() {
      this.contentsForm.directoryName = ''
      this.contentsForm.status = ''
    },
    pageChange(page) {
      this.contentsForm.page = page
      this.getContents()
    },
    pagesizeChange(size) {
      this.contentsForm.pagesize = size
      this.contentsForm.page = 1
      this.getContents()
    },
    // 删除信息
    async delcol(id) {
      // console.log(res)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // remove里面要删除的是要获取到响应的id值，所以要上传的参数应该是id：形参
          // 但是上面的也要传参进去，同时要确定传的参数是当前插槽的当前行的id，所以是scope.row.id
          await ljc.remove({ id: id })
          this.$message.success('删除成功!')
          this.getContents()
        })
        .catch(() => {})
    },
    changeState(val) {
      // 先定义一个空的label，然后对获取到的val的state值进行判断，根据判断的结果来对数据进行更改
      let status = ''
      if (val.state) {
        val.state = 0
        status = '启用'
      } else {
        // !0的数字判断返回的都是true
        // 当两种状态点击出现问题时，应该先看提示是否出现，如果出现就说明走的then方法里面，说明请求成功，那么就要找逻辑问题
        val.state = 1
        status = '禁用'
      }
      // var data = {
      //   id: val.id,
      //   state: val.state
      // }
      this.$confirm('将改变文件的使用状态, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await ljc
            .removeState({
              id: val.id,
              state: val.state
            })
            .then(response => {
              this.$message.success('已成功' + !status + '!')
              this.getContents()
            })
            .catch(response => {
              this.$message.error(status + '失败!')
            })
        })
        .catch(() => {})
    },
    async addContent () {
      await ljc.add(this.newContentform)
      this.$message.success('添加目录成功')
      this.getContents()
      this.newContentform.directoryName = ''
    }
    // },
    // async getContentslist() {
    //   const items = await ljc.simple({ params: this.status })
    //   // console.log(items)
    //   this.status = items.data
    // }
  }
}
</script>

<<<<<<< HEAD
<style scoped less="">
.el-table {
  text-align: center;
}
.chose {
  margin: 20px 0;
  height: 80px;
  line-height: 30px;
}
.chose span {
  margin-right: 10px;
}
.el-select {
  margin-right: 20px;
}
.two {
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;

<style scoped lang="scss">
.dashboard-container {
  padding: 10px 30px;
  .contentForm {
    .text_ts {
      display: inline-block;
      height: 38px;
      // background-color: #ccc;
    }
  }

}
</style>
